<template>
  <view>
    <nut-tabs v-model="state.tab1value" background="white">
      <!-- <view class="tabTop">
        <view>按月份筛选</view>
        <view>按时间段筛选</view>
      </view> -->
      <nut-tab-pane title="全部" style="padding: 0">
        <Top :timeState="timeState" :timeChooseList="timeChooseList" @choose="choose" @cancel="cancel"
          @cleaning="cleaning" @timeChoose="timeChoose" @chooseStartAndEnd="chooseStartAndEnd" :dateShow="dateShow"
          :diaTime="diaTime"></Top>
        <List :list="list" @cancelOrder="cancelOrder"></List>
      </nut-tab-pane>
      <nut-tab-pane title="待处理" style="padding: 0">
        <StatusClassification @chooseStatus="chooseStatus" :statusChooseList="statusChooseList"></StatusClassification>
        <Top :timeState="timeState" :timeChooseList="timeChooseList" @cancel="cancel" @cleaning="cleaning"
          @chooseStartAndEnd="chooseStartAndEnd" @timeChoose="timeChoose" @choose="choose" :dateShow="dateShow"
          :diaTime="diaTime"></Top>
        <List :list="pending" @cancelOrder="cancelOrder"></List>
      </nut-tab-pane>
      <nut-tab-pane title="待签收" style="padding: 0">
        <Top :timeState="timeState" :timeChooseList="timeChooseList" @cancel="cancel" @cleaning="cleaning"
          @chooseStartAndEnd="chooseStartAndEnd" @timeChoose="timeChoose" @choose="choose" :dateShow="dateShow"
          :diaTime="diaTime"></Top>
        <List :list="toSign" @cancelOrder="cancelOrder"></List>
      </nut-tab-pane>
      <nut-tab-pane title="已完成" style="padding: 0">
        <Top :timeState="timeState" :timeChooseList="timeChooseList" @cancel="cancel" @cleaning="cleaning"
          @chooseStartAndEnd="chooseStartAndEnd" @timeChoose="timeChoose" @choose="choose" :dateShow="dateShow"
          :diaTime="diaTime"></Top>
        <List :list="Completed" @cancelOrder="cancelOrder"></List>
      </nut-tab-pane>
      <nut-tab-pane title="已撤销" style="padding: 0">
        <Top :timeState="timeState" :timeChooseList="timeChooseList" @cancel="cancel" @cleaning="cleaning"
          @chooseStartAndEnd="chooseStartAndEnd" @timeChoose="timeChoose" @choose="choose" :dateShow="dateShow"
          :diaTime="diaTime"></Top>
        <List :list="undone" @cancelOrder="cancelOrder"></List>
      </nut-tab-pane>
    </nut-tabs>
    <nut-popup title="开始时间" closeable round position="bottom" v-model:visible="dateShow.start">
      <nut-date-picker v-model="currentDate.start" :min-date="minDate" :max-date="maxDate" @change="changes1"
        :is-show-chinese="true" :show-toolbar="false">
        <nut-button style="margin-bottom: 10px; background: #0966ff" block type="primary"
          @click="alwaysFun1">确定</nut-button>
      </nut-date-picker>
    </nut-popup>
    <nut-popup title="结束时间" closeable round position="bottom" v-model:visible="dateShow.end">
      <nut-date-picker v-model="currentDate.end" :min-date="minDate" :max-date="maxDate" @change="changes2"
        :is-show-chinese="true" :show-toolbar="false">
        <nut-button style="margin-bottom: 10px; background: #0966ff" block type="primary"
          @click="alwaysFun2">确定</nut-button>
      </nut-date-picker>
    </nut-popup>
    <nut-notify v-model:visible="errMsg.show" :msg="errMsg.message" />
  </view>
</template>
<script lang="ts" setup>
import Taro from "@tarojs/taro";
import Top from "./components/top.vue";
import List from "./components/list.vue";
import StatusClassification from "./components/statusClassification.vue";
import { $post } from "../../@api/index";
import dayjs from "dayjs";
import { onMounted, ref, reactive, watch } from "vue";
import { type OrderList } from "./types";
const state = reactive({
  tabValue: "0",
});
const currentDate = ref<{
  start: string;
  end: string;
}>({
  start: "",
  end: "",
});
const errMsg = ref<{ show: boolean; message: string }>({
  show: false,
  message: "",
});
const dateShow = ref<{
  start: boolean;
  end: boolean;
}>({
  start: false,
  end: false,
});
const minDate = ref<object>(new Date(2020, 0, 1));
const maxDate = ref<object>(new Date());
const timeState = ref<{
  starttime: string;
  endtime: string;
}>({
  starttime: dayjs().startOf("month").format("YYYY-MM-DD HH:mm:ss"),
  endtime: dayjs().format("YYYY-MM-DD HH:mm:ss"),
});
const statusChooseList = ref<
  { name: string; label: string; choose: boolean }[]
>([
  {
    name: "allPending",
    label: "全部",
    choose: true,
  },
  {
    name: "waiting",
    choose: false,
    label: "等待派车",
  },
  {
    name: "pickUp",
    choose: false,
    label: "前往接货",
  },
  {
    name: "success",
    choose: false,
    label: "接单成功",
  },
]);
const timeChooseList = ref<
  { name: string; label: string; choose: boolean; start: string; end: string }[]
>([
  {
    name: "oneMonth",
    label: "近一月",
    choose: false,
    start: dayjs().subtract(1, "month").format("YYYY-MM-DD HH:mm:ss"),
    end: dayjs().format("YYYY-MM-DD HH:mm:ss"),
  },
  {
    name: "threeMonth",
    label: "近三月",
    choose: false,
    start: dayjs().subtract(3, "month").format("YYYY-MM-DD HH:mm:ss"),
    end: dayjs().format("YYYY-MM-DD HH:mm:ss"),
  },
  {
    name: "sixMonth",
    label: "近六月",
    choose: false,
    start: dayjs().subtract(6, "month").format("YYYY-MM-DD HH:mm:ss"),
    end: dayjs().format("YYYY-MM-DD HH:mm:ss"),
  },
  {
    name: "oneYear",
    label: "近一年",
    choose: false,
    start: dayjs().subtract(1, "year").format("YYYY-MM-DD HH:mm:ss"),
    end: dayjs().format("YYYY-MM-DD HH:mm:ss"),
  },
]);
const list = ref<OrderList[]>([]);
const pending = ref<OrderList[]>([]);
const toSign = ref<OrderList[]>([]);
const Completed = ref<OrderList[]>([]);
const undone = ref<OrderList[]>([]);
const startTest = ref();
const endTest = ref();
const diaTime = ref<{
  startTime: string;
  endTime: string;
}>({
  startTime: "",
  endTime: "",
});
// 请求所有我的订单
async function getList() {
  const res = await $post<{ code: number; data: OrderList[] }>(
    "/myOrders/myOrders",
    {
      openId: "oN9cn09rkm0cceEHq1VUfCd4LP4k",
      starttime: timeState.value.starttime,
      endtime: timeState.value.endtime,
    }
  );
  if (res.data.code == 0) {
    list.value = res.data.data;
    pending.value = [];
    toSign.value = [];
    Completed.value = [];
    undone.value = [];
    res.data.data.forEach((item: OrderList) => {
      if (
        item.STATUS == "待处理" ||
        item.STATUS == "等待派车" ||
        item.STATUS == "前往接货" ||
        item.STATUS == "接单成功"
      ) {
        pending.value.push(item);
      }
      if (item.STATUS == "待签收") {
        toSign.value.push(item);
      }
      if (item.STATUS == "已完成") {
        Completed.value.push(item);
      }
      if (item.STATUS == "撤销") {
        undone.value.push(item);
      }
    });
    statusChooseList.value.forEach((aa) => {
      if (aa.choose) {
        if (aa.name == "allPending") {
          pending.value = list.value.filter((listItem: OrderList) => {
            return (
              listItem.STATUS == "待处理" ||
              listItem.STATUS == "等待派车" ||
              listItem.STATUS == "前往接货" ||
              listItem.STATUS == "接单成功"
            );
          });
        } else if (aa.name == "waiting") {
          pending.value = list.value.filter((listItem: OrderList) => {
            return listItem.STATUS == "等待派车";
          });
        } else if (aa.name == "pickUp") {
          pending.value = list.value.filter((listItem: OrderList) => {
            return listItem.STATUS == "前往接货";
          });
        } else if (aa.name == "success") {
          pending.value = list.value.filter((listItem: OrderList) => {
            return listItem.STATUS == "接单成功";
          });
        }
      }
    });
  }
}
//取消订单回调
function cancelOrder(msg: string) {
  errMsg.value.message = msg;
  errMsg.value.show = true;
  getList();
}
function changes1(res: {
  columnIndex: number;
  selectedOptions: { test: string; value: string };
  selectedValue: Array<string>;
}) {
  startTest.value = res.selectedValue;
  console.log(res.selectedValue, "res");
}
function changes2(res: {
  columnIndex: number;
  selectedOptions: { test: string; value: string };
  selectedValue: Array<string>;
}) {
  endTest.value = res.selectedValue;
  console.log(res.selectedValue, "res");
}
//选择时间
function alwaysFun1() {
  diaTime.value.startTime = dayjs(startTest.value).format(
    "YYYY-MM-DD HH:mm:ss"
  );
  dateShow.value.start = false;
}
function alwaysFun2() {
  diaTime.value.endTime = dayjs(endTest.value).format("YYYY-MM-DD HH:mm:ss");
  dateShow.value.end = false;
}
function choose(monthRes: any) {
  timeChooseList.value.forEach((aa: any) => {
    aa.choose = false;
  });
  timeState.value.starttime = dayjs(monthRes).format("YYYY-MM-DD HH:mm:ss");
  timeState.value.endtime = dayjs(monthRes)
    .endOf("month")
    .format("YYYY-MM-DD HH:mm:ss");
  getList();
}
function cancel() {
  timeChooseList.value.forEach((aa: any) => {
    aa.choose = false;
  });
  timeState.value.starttime = dayjs()
    .startOf("month")
    .format("YYYY-MM-DD HH:mm:ss");
  timeState.value.endtime = dayjs().format("YYYY-MM-DD HH:mm:ss");
  getList();
}
function cleaning(itemName: string) {
  timeChooseList.value.forEach((aa: any) => {
    if (aa.name !== itemName) {
      aa.choose = false;
    }
  });
}
function timeChoose(timeValue: { starttime: string; endtime: string }) {
  let aa = true;
  timeChooseList.value.forEach((item: any) => {
    if (item.choose) {
      aa = false;
      return;
    }
  });
  if (!aa) {
    timeState.value.starttime = timeValue.starttime;
    timeState.value.endtime = timeValue.endtime;
  } else {
    timeState.value.starttime = diaTime.value.startTime;
    timeState.value.endtime = diaTime.value.endTime;
  }
  getList();
}
function chooseStartAndEnd(num: number) {
  timeChooseList.value.forEach((aa: any) => {
    aa.choose = false;
  });
  if (num == 1) {
    dateShow.value.start = true;
  } else {
    dateShow.value.end = true;
  }
}
//待确认状态筛选
function chooseStatus(item: { name: string; label: string; choose: boolean }) {
  statusChooseList.value.forEach(
    (aa: { name: string; label: string; choose: boolean }) => {
      if (aa.name == item.name) {
        aa.choose = true;
      } else {
        aa.choose = false;
      }
    }
  );
  getList();
  // getList().then(() => {
  //   if (item.name == "allPending") {
  //     pending.value = list.value.filter((listItem: OrderList) => {
  //       return (
  //         listItem.STATUS == "待处理" ||
  //         listItem.STATUS == "等待派车" ||
  //         listItem.STATUS == "前往接货" ||
  //         listItem.STATUS == "接单成功"
  //       );
  //     });
  //   } else if (item.name == "waiting") {
  //     pending.value = list.value.filter((listItem: OrderList) => {
  //       return listItem.STATUS == "等待派车";
  //     });
  //   } else if (item.name == "pickUp") {
  //     pending.value = list.value.filter((listItem: OrderList) => {
  //       return listItem.STATUS == "前往接货";
  //     });
  //   } else if (item.name == "success") {
  //     pending.value = list.value.filter((listItem: OrderList) => {
  //       return listItem.STATUS == "接单成功";
  //     });
  //   }
  // });
}
getList();
</script>
<style lang="less">
.tabTop {
  display: flex;

  view {
    text-align: center;
  }
}
</style>
